<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>
</head>
<body>
<div id="app">

</div>
<!-- 1:引包 -->
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
  var App = {
    template: `<div>
           (<input type="number" v-model="n1"/>
            +
            <input type="number" v-model="n2"/>
            )*
            <input type="number" v-model="rate1"/>
            ={{result}}
          </div>`,
    data: function () {
      return {
        n1: 0,
        n2: 0,
        rate1: 1
      }
    },
    computed: {
      result: function () {
        return ((this.n1 - 0) + (this.n2 - 0)) * this.rate1
      }
    }
  }

  new Vue({
    el: "#app",
    components: {

      'app': App
    },
    template: '<app/>'

  })
</script>

</body>
</html>
